import './App.css';
//相当于vue3 ref reactive 来创建响应式数据
// import {useState,useEffect,useMemo,useCallback,useRef,useContext} from 'react'

// import React from 'react';
// //函数组件
// //引入函数式组件
// import Son from './FunComponents/Son';

// export let myContext = React.createContext("haah")

// function App(){
//   //相当于render
//   //state通过hook实现响应式数据

//   let [meg,setmsg] = useState("hello")
//   //可以在函数体内定义方法
//   const changeMSg = ()=>{
//     setmsg("修改后的数据")
//   }
//   //生命周期
//   //第一个参数是回调函数（必填）
//   //第二个传空数组
//   useEffect(()=>{
//     console.log('useEffect')
//   },[meg])

//   //useMemo 特性和useEffect相同
//   //效果相当于computed
//   let [arr,setarr] = useState([1])

//   let total = useMemo(()=>{
//     let _all = 0;
//     arr.forEach((item)=>{
//       _all += item
//     })
//     return _all
//   },[arr])

//   // const changeArray = ()=>{
//   //   let _num = arr.length + 1
//   //   let _arr = [...arr]
//   //   _arr.push(_num)
//   //   setarr(_arr)
//   // }

//   //useCallback   防止方法呗重新创建 特性和useEffect相同
//   const changeArray = useCallback(()=>{
//     let _num = arr.length + 1
//     let _arr = [...arr]
//     _arr.push(_num)
//     setarr(_arr)
//   },[arr])



//   //useRef对象 需要在mounted下进行调用
//   let dom1 = useRef();
//   useEffect(()=>{
//     console.log("获取ref",dom1)
//   },[])

//   return (
//     <>
//       <button onClick={changeMSg}>修改state</button>
//       <div className='App' ref={dom1}> 函数式组件 -- {meg}</div>
//       <br/>
//       <myContext.Provider  value='测试usecontext'>
//         <Son fatherMsg = "来自父组件的信息"></Son>
//       </myContext.Provider>
//       <br/>
//       <button onClick={changeArray}>改变数组</button>
//       <div>使用useMemo进行计算属性---{total}</div>
//     </>
//   )
// }



// //高阶组件

// import HocSon from './FunComponents/Hoctest';
// import TestHoc from './FunComponents/TestHoc';
// import {useState} from 'react';

// let SonHoc =  TestHoc(HocSon)
// function App(){
//   let [msg,setmsg] = useState("我是原数据")
//   const changemsg = ()=>{
//     setmsg("源数据修改之后的数据")
//   }
//   return(
//     <div className='App'>
//       <button onClick={changemsg}>源数据：{msg}</button>
//       <SonHoc b="111111"></SonHoc>
//     </div>
//   )
// }


// //react 路由
// import { Routes, Route, NavLink, Link } from "react-router-dom"
// import Page1 from './RouterComponents/Page1';
// import Page2 from './RouterComponents/Page2';
// import Page3 from './RouterComponents/Page3';
// // import Page4 from './RouterComponents/Page4';
// import Page3Son1 from './RouterComponents/Page3Son1';

// //异步路由
// import { lazy, Suspense } from 'react';
// let lazyPage4 = lazy(() => {
//   return import("./RouterComponents/Page4")
// })

// function App() {
//   let token = localStorage.getItem('token')
//   return <>
//     <div className="App">react 路由菜单</div>
//     <br />

//     <NavLink to="/page1">Page1</NavLink>
//     <br />
//     <Link to="/page2/12">Page2</Link>
//     <br />
//     <NavLink to="/page3">page3</NavLink>
//     <br />
//     {/* 异步路由 */}
//     <NavLink to="/page4?id=21123">page4</NavLink>
//     {/* 定义路由显示位置  */}
//     {/* v5是switch v6是Routes */}
//     {/* Suspense的作用是过度效果 */}
//     <Suspense fallback={<h1>加载中。。。。。。</h1>}>
//       <Routes>
//         {/* v5只有component */}
//         {/* 权限控制  */}
//         {token ? <Route path='/page1' element={<Page1></Page1>}></Route> : ""}
//         {/* <Route path='/page1' element = {<Page1></Page1>}></Route> */}
//         {/* 动态路由 */}
//         <Route path='/page2/:id' Component={Page2}></Route>
//         {/* 异步路由  表示进入才开始加载页面 */}
//         <Route path='/page4' Component={lazyPage4}></Route>
//         {/* 嵌套路由 */}
//         <Route path='/page3' element={<Page3></Page3>}>
//           <Route path='son1' Component={Page3Son1}></Route>
//         </Route>
//       </Routes>
//     </Suspense>
//   </>
// }



//React状态管理


//引入数据管理   以下是就写法
// import store from './store';
// let state = store.getState()
// function App() {
//   console.log(state)


//   //修改store的数据
//   const changstate = ()=>{
//     store.dispatch({
//       type: 'changeMsg',
//       payload: "修改的数据"
//     })
//     console.log(state.msg)
//   }


//   return <>
//     <div className='App'>
//       React状态管理
//       <br />
//       {state.msg}
//       <br />
//       <button onClick={changstate}>修改仓库</button>
//     </div>
//   </>
// }



//新写法

import {connect} from "react-redux"

import { changeMsg } from './store/tollkitIndex';

function App(props) {
  console.log(props)

  //修改store的数据
  const changstate = ()=>{
    // props.dispatch({
    //   type: 'changeMsg',
    //   payload: "修改的数据"
    // })
    props.changeMsg()
  }


  return <>
    <div className='App'>
      React状态管理 ---{props.msg}
      <br />
      <button onClick={changstate}>修改仓库</button>
    </div>
  </>
}
// connect 
// 第一个参数     state的映射  你要把哪些state映射到该组件的props
//如果只要映射某一个  也必须返回一个对象
//第二个参数   方法的映射 你要给props加入哪些方法
let reduxApp = connect((state)=>{
  // return state
  return {
    msg:state.Msgreducer.msg
  }
},(dispatch)=>{
  return {
    changeMsg(){
      // dispatch({
      //   type: 'msgSlicce/changeMsg',
      //   payload: "修改的数据"
      // })
      //

      //toolKit触发方法
      dispatch(changeMsg("修改的数据2"))
    }
  }
})(App)

export default reduxApp;
